<template>
  <div class="header-container">
    <!-- Logo区域 -->
    <img src="@/assets/logo-horizon.png" class="logo-box" alt="logo-horizon"/>

    <!-- 中间的一横分割线 -->
    <div class="divide-line"></div>

    <!-- 文字区域 -->
    <div class="title-container">
      <div class="chinese-title">人才招聘</div>
      <div class="english-title">Talent Recruitment</div>
    </div>
  </div>
</template>

<style scoped>
.header-container {
  width: 100%;
  height: 123px;
  display: flex;
  align-items: center;
  background: #ADD8E6;
}

.logo-box {
  width: 20%;
  margin-right: 3%;
  margin-left: 10%;
}

.divide-line {
  width: 1px;
  height: 80px;
  background-color: white;
  margin-right: 3%;
}

.title-container {
  width: 200px;
  height: 60px;
  margin-bottom: 40px;
}

.chinese-title {
  font-size: 35px;
  font-weight: 400;
  color: #333;
  letter-spacing: 2px;
  width: 100%;
}

.english-title {
  font-size: 14px;
  color: #666;
  letter-spacing: 2px;
  margin-top: 4px;
  width: 108%; /* 微调宽度补偿 */
  transform: translateX(-3%);
}

/* 实现文字宽度对齐优化 */
.title-container div {
  white-space: nowrap;
  box-sizing: border-box;
}
</style>